<template>
  <el-container class="layout-container">
    <el-aside :width="isCollapse ? '64px' : '210px'" class="aside-container">
      <div class="logo-container" :class="{ 'collapsed': isCollapse }">
        <img src="@/assets/logo.png" alt="logo" class="logo-img">
        <span v-show="!isCollapse" class="logo-text">商家后台</span>
      </div>

      <el-scrollbar>
        <el-menu
          :default-active="activeMenu"
          class="el-menu-vertical"
          :collapse="isCollapse"
          background-color="#304156"
          text-color="#bfcbd9"
          active-text-color="#409EFF"
          :unique-opened="true"
          router
        >
          <el-menu-item index="/layout/dashboard">
            <el-icon><Monitor /></el-icon>
            <template #title>控制台</template>
          </el-menu-item>
          <el-menu-item index="/layout/orders">
            <el-icon><User /></el-icon>
            <template #title>订单管理</template>
          </el-menu-item>
          <!-- 添加订单管理的子菜单 -->
<!--          <el-sub-menu index="/layout/orders-management">-->
<!--            <template #title>-->
<!--              <el-icon><Document /></el-icon>-->
<!--              <span>订单管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/layout/orders/shipped">-->
<!--              <el-icon><Check /></el-icon>-->
<!--              <template #title>已发货</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/layout/orders/completed">-->
<!--              <el-icon><Finished /></el-icon>-->
<!--              <template #title>已完成</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/layout/orders/pending-payment">-->
<!--              <el-icon><Money /></el-icon>-->
<!--              <template #title>待付款</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/layout/orders/successful">-->
<!--              <el-icon><Success /></el-icon>-->
<!--              <template #title>交易成功</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/layout/orders/closed">-->
<!--              <el-icon><Close /></el-icon>-->
<!--              <template #title>交易关闭</template>-->
<!--            </el-menu-item>-->
<!--            <el-menu-item index="/layout/orders/pending-shipment">-->
<!--              <el-icon><Delivery /></el-icon>-->
<!--              <template #title>待发货</template>-->
<!--            </el-menu-item>-->
<!--          </el-sub-menu>-->

          <el-sub-menu index="/layout/goods">
            <template #title>
              <el-icon><Goods /></el-icon>
              <span>商品管理</span>
            </template>
            <el-menu-item index="/layout/categories">
              <el-icon><Files /></el-icon>
              <template #title>分类管理</template>
            </el-menu-item>
            <el-menu-item index="/layout/goods">
              <el-icon><List /></el-icon>
              <template #title>商品列表</template>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/layout/usersmanager">
            <el-icon><User /></el-icon>
            <template #title>用户管理</template>
          </el-menu-item>

          <el-menu-item index="/settings">
            <el-icon><Setting /></el-icon>
            <template #title>系统设置</template>
          </el-menu-item>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header class="header-container">
        <div class="header-left">
          <el-icon
            class="collapse-btn"
            @click="toggleCollapse"
          >
            <component :is="Icons[isCollapse ? 'Expand' : 'Fold']" />
          </el-icon>
          <breadcrumb />
        </div>

        <div class="header-right">
          <el-tooltip content="全屏" placement="bottom">
            <el-icon class="right-menu-item" @click="toggleFullScreen">
              <FullScreen />
            </el-icon>
          </el-tooltip>

          <el-dropdown trigger="click" class="avatar-container">
            <div class="avatar-wrapper">
              <el-avatar :size="32" class="user-avatar">
                A
              </el-avatar>
              <span class="user-name">Admin</span>
              <el-icon><CaretBottom /></el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <el-icon><User /></el-icon>个人中心
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-icon><Setting /></el-icon>系统设置
                </el-dropdown-item>
                <el-dropdown-item divided @click="handleLogout">
                  <el-icon><SwitchButton /></el-icon>退出登录
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <el-main class="main-container">
        <router-view v-slot="{ Component }">
          <transition name="fade-transform" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessageBox } from 'element-plus'
import {
  FullScreen,
  CaretBottom,
  User,
  Setting,
  SwitchButton,
  Monitor,
  // Document,
  Goods,
  Files,
  List
} from '@element-plus/icons-vue'
import * as Icons from '@element-plus/icons-vue'
import Breadcrumb from '@/components/BreadCrumb.vue'

const router = useRouter()
const route = useRoute()

const isCollapse = ref(false)
const activeMenu = computed(() => route.path)

// 切换侧边栏折叠状态
const toggleCollapse = () => {
  isCollapse.value = !isCollapse.value
}

// 切换全屏
const toggleFullScreen = () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen()
  } else {
    document.exitFullscreen()
  }
}

// 退出登录
const handleLogout = () => {
  ElMessageBox.confirm('确认退出系统?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 执行退出登录逻辑
    router.push('/login')
  })
}
</script>

<style scoped>
.layout-container {
  height: 100vh;
}

.aside-container {
  background-color: #304156;
  transition: width 0.3s;
  overflow: hidden;
}

.logo-container {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  background-color: #2b3847;
  overflow: hidden;
}

.logo-container.collapsed {
  padding: 0 14px;
}

.logo-img {
  width: 32px;
  height: 32px;
  margin-right: 12px;
}

.logo-text {
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
}

.el-menu-vertical:not(.el-menu--collapse) {
  width: 210px;
  border-right: none;
}

.el-menu-vertical.el-menu--collapse {
  border-right: none;
}

.header-container {
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px;
}

.header-left {
  display: flex;
  align-items: center;
}

.collapse-btn {
  font-size: 20px;
  cursor: pointer;
  margin-right: 16px;

  &:hover {
    color: #409EFF;
  }
}

.header-right {
  display: flex;
  align-items: center;
}

.right-menu-item {
  font-size: 20px;
  padding: 0 12px;
  cursor: pointer;

  &:hover {
    color: #409EFF;
  }
}

.avatar-container {
  margin-left: 12px;
}

.avatar-wrapper {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 0 8px;
}

.user-avatar {
  background: #409EFF;
  margin-right: 8px;
}

.user-name {
  font-size: 14px;
  margin-right: 4px;
}

.main-container {
  background-color: #f0f2f5;
  padding: 16px;
}

/* 路由切换动画 */
.fade-transform-enter-active,
.fade-transform-leave-active {
  transition: all 0.3s;
}

.fade-transform-enter-from {
  opacity: 0;
  transform: translateX(-30px);
}

.fade-transform-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
